<template>
  <div class style="width: 100%;height:100%;">
    <div id="container11" style="height: 100%"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import reslist from "../json/position.js";
import chartmixins from "../chartmixins.js";

export default {
  mixins: [chartmixins],
  name: "leftthree",
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  mounted() {
    var dom = document.getElementById("container11");
    var myChart = echarts.init(dom, "dark");
    var app = {};
    let option = null;
    option = {
      ...this.options,
      color: [
        "#002699",
        "#00992677",
        "#99002677",
        "#144FFF77",
        "#99007377",
        "#D6A10077",
        "#73990077"
      ],
      tooltip: {
        trigger: "item",
        formatter: "{b}: {c}"
      },
      title: {
        // text: "湿度",
        // subtext: "纯属虚构",
        // x: "center"
      },
      xAxis: {
        type: "category",
        axisTick: {
            show: false
        },
        data: [],
        axisLabel: {
          formatter: function(value) {
            return ''
          }
        }
      },
      grid: {
        //控制图表上下左右距离
        left: "5%",
        top: "30%",
        right: "5%",
        bottom: "20%",
        containLabel: true
      },
      yAxis: [
        {
          type: "value",
          name: "湿度 %",
          // min: 0,
          // max: 200,
             interval: 10,
          axisLabel: {
            formatter: "{value}"
          },
          splitLine: {
            //网格线
            show: false
          }
        }
      ],
      // legend: {
      //   x: "center",
      //   y: "bottom",
      //   data: ["温度", "湿度", "门禁", "空调", "snmp", "水浸"]
      // },
      toolbox: {
        show: true,
        feature: {
          mark: {
            show: true
          }
        }
      },
      calculable: true,
      visualMap: {
        orient: "horizontal",
        top: 10,
        x: "center",
        // right: 10,
        pieces: [
          {
            gt: 0,
            lte: 15,
            color: "#ffeb0f"
          },
          {
            gt: 15,
            lte: 30,
            color: "#00c1c8"
          }
        ],
        outOfRange: {
          color: "#999"
        }
      },
      series: [
        {
          type: "bar",
          barWidth:7,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#17DBA9" },
                { offset: 0.5, color: "#0F9FC2" },
                { offset: 1, color: "#0662DD00" }
              ])
            },
            emphasis: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#2378f7" },
                { offset: 0.7, color: "#2378f7" },
                { offset: 1, color: "#83bff6" }
              ])
            }
          },
          data: [],
          // markLine: {
          //   itemStyle: {
          //     normal: {
          //       lineStyle: { type: "solid", color: "#fff" },
          //       // label: { show: true, position: "right" }
          //     }
          //   },
          //   silent: true,
          //   data: [
          //     {
          //       yAxis: 15
          //     }
          //   ]
          // }
        }
      ]
    };
    reslist.map(item => {
      item.devlist.map(devitem => {
        option.series[0].data.push(_.random(10, 30));
        option.xAxis.data.push(devitem.name.replace("门架", "机房"));
        // option.legend.data.push(tunnelitem.name)
      });
    });
    myChart.setOption(option, true);

    this.myChart = myChart;

    window.addEventListener("resize", () => {
      this.myChart.resize();
    });
  },
  methods: {}
};
</script>
<style lang='scss' scoped>
</style>